<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>代码编辑</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../assets/css/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
	<link rel="stylesheet" href="../assets/lib/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="../assets/css/public.css" media="all">
	<link rel="stylesheet" href="../assets/lib/codemirror/codemirror.css" media="all">
	<link rel="stylesheet" href="../assets/lib/codemirror/theme/dracula.css" media="all">
	<link rel="stylesheet" href="../assets/lib/codemirror/addon/fold/foldgutter.css" />
	<style type="text/css">
		.CodeMirror {
			border-top: 1px solid black;
			border-bottom: 1px solid black;
		}

		.layui-card {
			border: 1px solid #f2f2f2;
			border-radius: 5px;
		}

		.icon {
			margin-right: 10px;
			color: #1aa094;
		}
	</style>
</head>

<body>
	<div class="admin-container">
		<div class="admin-main">
			<article>
				<form>
					<div class="layui-card">
						<div class="layui-card-header"><i class="fa fa-warning icon"></i>JavaScript</div>
						<div class="layui-card-body">
							<textarea id="code" name="code"></textarea>
						</div>
					</div>
					<div class="layui-card">
						<div class="layui-card-header"><i class="fa fa-warning icon"></i>HTML</div>
						<div class="layui-card-body">
							<textarea id="code-html" name="code-html"></textarea>
						</div>
					</div>
					<div class="layui-card">
						<div class="layui-card-header"><i class="fa fa-warning icon"></i>JSON with custom widget</div>
						<div class="layui-card-body">
							<textarea id="code-json" name="code-json">
{
	"menu": {
		"id": "file",
		"value": "File",
		"popup": {
			"menuitem": [
				{"value": "New", "onclick": "CreateNewDoc()"},
				{"value": "Open", "onclick": "OpenDoc()"},
				{"value": "Close", "onclick": "CloseDoc()"}
			]
		}
	}
}
							</textarea>
						</div>
					</div>
					<div class="layui-card">
						<div class="layui-card-header"><i class="fa fa-warning icon"></i>Python</div>
						<div class="layui-card-body">
							<textarea id="code-python" name="code">
def foo():
do_some_stuff()
here
return None

class Bar:
__init__(self):
if True:
print("True")
else:
print("False")

this_code_makes_no_sense():
pass

# A comment
							</textarea>
						</div>
					</div>
					<div class="layui-card">
						<div class="layui-card-header"><i class="fa fa-warning icon"></i>Markdown</div>
						<div class="layui-card-body">
							<textarea id="code-markdown" name="code"></textarea>
						</div>
					</div>
				</form>
			</article>
		</div>
	</div>
	<script src="../assets/js/jquery-3.4.1.min.js" charset="utf-8"></script>
	<script src="../assets/lib/layui/layui.js" charset="utf-8"></script>
	<!-- CodeMirror -->
	<script src="../assets/lib/codemirror/codemirror.js"></script>
	<script src="../assets/lib/codemirror/addon/fold/foldcode.js"></script>
	<script src="../assets/lib/codemirror/addon/fold/foldgutter.js"></script>
	<script src="../assets/lib/codemirror/addon/fold/brace-fold.js"></script>
	<script src="../assets/lib/codemirror/addon/fold/xml-fold.js"></script>
	<script src="../assets/lib/codemirror/addon/fold/indent-fold.js"></script>
	<script src="../assets/lib/codemirror/addon/fold/markdown-fold.js"></script>
	<script src="../assets/lib/codemirror/addon/fold/comment-fold.js"></script>
	<script src="../assets/lib/codemirror/mode/javascript/javascript.js"></script>
	<script src="../assets/lib/codemirror/mode/xml/xml.js"></script>
	<script src="../assets/lib/codemirror/mode/css/css.js"></script>
	<script src="../assets/lib/codemirror/mode/htmlmixed/htmlmixed.js"></script>
	<script src="../assets/lib/codemirror/mode/python/python.js"></script>
	<script src="../assets/lib/codemirror/mode/markdown/markdown.js"></script>
	<script type="text/javascript" id="script">
		window.onload = function() {
			var te = document.getElementById("code");
			var sc = document.getElementById("script");
			te.value = (sc.textContent || sc.innerText || sc.innerHTML).replace(/^\s*/, "");
			sc.innerHTML = "";
			var te_html = document.getElementById("code-html");
			te_html.value = document.documentElement.innerHTML;
			var te_python = document.getElementById("code-python");
			var te_markdown = document.getElementById("code-markdown");
			te_markdown.value = "# Foo\n## Bar\n\nblah blah\n\n## Baz\n\nblah blah\n\n# Quux\n\nblah blah\n"
			var te_json = document.getElementById("code-json");

			window.editor = CodeMirror.fromTextArea(te, {
				mode: "javascript",
				lineNumbers: true,
				lineWrapping: true,
				extraKeys: { "Ctrl-Q": function(cm) { cm.foldCode(cm.getCursor()); } },
				foldGutter: true,
				gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
			});
			editor.foldCode(CodeMirror.Pos(13, 0));

			window.editor_json = CodeMirror.fromTextArea(te_json, {
				mode: { name: "javascript", json: true },
				lineNumbers: true,
				lineWrapping: true,
				extraKeys: { "Ctrl-Q": function(cm) { cm.foldCode(cm.getCursor()); } },
				foldGutter: true,
				gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
				foldOptions: {
					widget: (from, to) => {
						var count = undefined;

						/*Get open / close token*/
						var startToken = '{',
							endToken = '}';
						var prevLine = window.editor_json.getLine(from.line);
						if (prevLine.lastIndexOf('[') > prevLine.lastIndexOf('{')) {
							startToken = '[', endToken = ']';
						}

						/*Get json content*/
						var internal = window.editor_json.getRange(from, to);
						var toParse = startToken + internal + endToken;

						/*Get key count*/
						try {
							var parsed = JSON.parse(toParse);
							count = Object.keys(parsed).length;
						} catch (e) {}

						return count ? `↤${count}↦` : '↔';
					}
				}
			});
			editor_json.foldCode(CodeMirror.Pos(5, 0));

			window.editor_html = CodeMirror.fromTextArea(te_html, {
				mode: "text/html",
				lineNumbers: true,
				lineWrapping: true,
				extraKeys: { "Ctrl-Q": function(cm) { cm.foldCode(cm.getCursor()); } },
				foldGutter: true,
				gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
			});
			editor_html.foldCode(CodeMirror.Pos(0, 0));
			editor_html.foldCode(CodeMirror.Pos(34, 0));

			window.editor_python = CodeMirror.fromTextArea(te_python, {
				mode: "python",
				lineNumbers: true,
				extraKeys: { "Ctrl-Q": function(cm) { cm.foldCode(cm.getCursor()); } },
				foldGutter: true,
				gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
			});

			window.editor_markdown = CodeMirror.fromTextArea(te_markdown, {
				mode: "markdown",
				lineNumbers: true,
				lineWrapping: true,
				extraKeys: { "Ctrl-Q": function(cm) { cm.foldCode(cm.getCursor()); } },
				foldGutter: true,
				gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
			});
		};
	</script>
</body>

</html>